<template>
  <f7-page>
    <f7-navbar title="激活" back-link="返回"></f7-navbar>
    <div class="top-buttons">
      <f7-button fill @click="activeModal = true">激活</f7-button>
      <f7-button fill @click="chongzhiModal = true">充值激活币</f7-button>
    </div>

    <custom-modal v-model="activeModal" slot="fixed">
      <h2>激活币余额</h2>

      <h1 class="text-align-center">{{$store.getters.userInfo.money.jihuo_f}}</h1>

      <f7-button fill @click="handleActive">激活</f7-button>
    </custom-modal>

    <!--投诉弹窗-->
    <custom-modal v-model="chongzhiModal" slot="fixed" class="tousu-modal">
      <h1>充值激活币</h1>
      <custom-input type="number" placeholder="请输入充值金额" v-model="coinFormItems.money"></custom-input>
      <custom-input type="file" placeholder="请上传单据图片" @change="handleUploadImg"></custom-input>

      <f7-button fill @click="handleCoin">确定</f7-button>
    </custom-modal>
  </f7-page>
</template>

<script>
  import {activationUser, upLoadImages, activation} from "../api";

  export default {
    name: "active",
    data() {
      return {
        activeModal: false,
        chongzhiModal: false,
        coinFormItems: {
          money: '',
          image: ''
        }
      }
    },
    methods: {
      handleActive() {
        activationUser().then(() => {
          this.$store.dispatch('GetInfo')
          this.activeModal = false;
        })
      },
      handleUploadImg(imgUrl) {
        upLoadImages({image: imgUrl}).then(res => {
          this.coinFormItems.image = res.url.url;
        })
      },
      handleCoin() {
        activation(this.coinFormItems).then(() => {
          this.$store.dispatch('GetInfo');
          this.coinFormItems.money = '';
          this.coinFormItems.image = '';
          this.chongzhiModal = false;
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .top-buttons {
    display: flex;
    margin-top: 20px;
    .button {
      flex: 1;
      margin:0 10px;
    }
  }
  h2 {
    text-align: center;
    font-size: 28px;
  }
  h1 {
    font-size: 70px;
    padding: $padding 0;
  }
  .tousu-modal {
    h1 {
      text-align: center;
      padding: 20px 0;
      font-size: 28px;
    }
    .custom-input {
      margin-bottom: 20px;
    }
  }
</style>